<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="https://www.thymeleaf.org/extras/spring-security">
<div th:replace="common/common::html"></div>
<head>
    <meta charset="UTF-8">
    <title th:text="#{filePage.title}"></title>
    <script th:inline="javascript">

        const FILE_TYPE_FILE = 0
        const FILE_TYPE_FOLDER = 1
        var _gridWidth;
        var _gridHeight;
        //页面自适应
        function resizePageSize(){
            _gridWidth = $(document).width()-12;/*  -189 是去掉左侧 菜单的宽度，   -12 是防止浏览器缩小页面 出现滚动条 恢复页面时  折行的问题 */
            _gridHeight = $(document).height()-65 -40; /* -32 顶部主菜单高度，   -90 查询条件高度*/
        }

        $(function () {
            resizePageSize();
            var _columnWidth = (_gridWidth-150)/4;
            $("#flexigrid-id").flexigrid({
                width : _gridWidth,
                height : _gridHeight,
                url : /*[[@{/file/queryFileInfoListByPage}]]*/"",
                dataType : 'json',
                colModel : [
                    {display : 'fileUuid',name : 'fileUuid',width : 150,sortable : false,align : 'center',hide : 'true'},
                    {display : /*[[#{file.name}]]*/"",name : 'fileName',width : _columnWidth, sortable : true,align : 'center',
                        process: function(v,_trid,_row) {
                            var html = `<div style="display: flex;width: 100px;">`
                            if(_row.fileType === FILE_TYPE_FOLDER){
                                html += `<a href="#" style="color: #f7ba2a" class="btn" onclick="enterDir('${_row.fileUuid}','${_row.filePath}')"><i class="glyphicon glyphicon-file" style="margin-right: 5px"></i><span>${v}</span><a>`
                            }else{
                                html += `<a href="#" style="color: ##00b1ef;" class="btn" onclick="preFile('${_row.fileUuid}','${v}')"><i class="glyphicon glyphicon-folder-close" style="margin-right: 5px"></i><span>${v}</span><a>`
                            }
                            html += `</div>`
                            return html;

                        }
                    },
                    {display : /*[[#{file.size}]]*/"",name : 'fileCapacity',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{file.last.time}]]*/"",name : 'modtime',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{common.opreation}]]*/"",name : 'fileUuid',width : _columnWidth, sortable : true,align : 'center',process: function(v,_trid,_row){
                            var html = `<div>`
                            if(_row.fileType === FILE_TYPE_FILE){
                                html += `<a href="#" class="btn" onclick="modifyUserInfo('${v}')" title=[[#{common.modify}]]><i class="glyphicon glyphicon-pencil"></i></a>`
                                var url=/*[[@{/file/downFile}]]*/'';
                                url += "/" + v;

                                html += `<a href=${url} class="btn" title=[[#{file.download.btn}]] target="_blank"><i class="glyphicon glyphicon-download"></i></a>`


                                html += `<a href="#" class="btn" onclick="shareFileInfo('${v}','${_row.fileName}')" title=[[#{file.share.btn}]]><i class="glyphicon   glyphicon-share"></i></a>`

                            }else{
                                html += "--"
                            }


                            html += `<div>`
                            return html;

                        }
                    },
                ],
                resizable : false, //resizable table是否可伸缩
                useRp : true,
                usepager : true, //是否分页
                autoload : false, //自动加载，即第一次发起ajax请求
                hideOnSubmit : true, //是否在回调时显示遮盖
                showcheckbox : true, //是否显示多选框
               //rowhandler : rowDbclick, //是否启用行的扩展事情功能,在生成行时绑定事件，如双击，右键等
                rowbinddata : true
            });

            query();



            /**luxingyu**/
            /**
             * 修改文件对话框
             */
            $("#modify-file-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{file.modify.dialog.title}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var flag = $("form#modify-file-form-id input.form-control").checkDom()
                            if(!flag){
                                return
                            }
                            $("#modify-file-form-id").submit()
                        }
                    },//end button
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }//end buttons
                ]
            })//end dialog
            /**
             * 修改文件异步表单
             */
            $("#modify-file-form-id").ajaxForm({
                dataType: "json",
                success : function(data) {
                    message(data.msg);
                    query();
                    if(data.success){
                        $("#modify-file-dialog-id").dialog('close')
                    }
                },
                error : function() {
                    message(/*[[#{common.error}]]*/'');
                },

            })//end ajaxForm
            /**luxingyu**/





            /**
             * 创建文件夹
             */
            $("#mkdir-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{file.mkdir.dialog.tip}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var parentId = $("#file-folder-id").attr("parent-id");
                            var flag = $("#file-folder-name-id").checkDom();
                            if(!flag){
                                return
                            }

                            var folderName = $("#file-folder-name-id").val();

                            $.ajax({
                                type: 'post',
                                async: false,
                                dataType : 'json',
                                url: /*[[@{/file/mkdirFileInfo}]]*/'',
                                data: [
                                    {name:"parentId",value: parentId},
                                    {name:"folderName",value:folderName}
                                ],
                                success: function (data) {
                                    message(data.msg)
                                    query();
                                    $("#file-folder-name-id").val('');
                                    $("#mkdir-dialog-id").dialog('close')
                                },
                                error: function(msg){
                                    message(/*[[#{common.error}]]*/'');
                                }
                            });
                        }
                    },

                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    },
                ]
            })

            //上传文件对话框
            $("#upload-file-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{file.upload.dialog.tip}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var flag = $("#upload-file-name-id").checkDom()
                            if(!flag){
                                return
                            }
                            $("#upload-file-form-id").submit()
                        }
                    },

                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    },
                ]
            })

            $("#upload-file-form-id").ajaxForm({
                dataType: "json",
                success : function(data) {
                    query();
                    $("#upload-file-dialog-id").dialog('close')
                },
                error : function() {
                    message(/*[[#{common.error}]]*/'');
                },
            })

            /**
             * 文档预览
             */
            $("#pre-document-dialog-id").dialog({

                autoOpen : false,
                width : 800,
                modal : true,
                resizable : false,
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            $( this ).dialog("close");
                        }
                    }
                ]
            })

            $("#share-file-dialog-id").dialog({
                autoOpen : false,
                width : 800,
                modal : true,
                resizable : false,
                title: /*[[#{file.share.dialog.tip}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            })

        });//end ready function









        /****yanglanting******/
        function query(){

            var fileName = $("#file-name-id").val()
            $("#flexigrid-id").flexOptions({
                extParam:[
                    {name:"fileName",value:fileName},
                ]

            }).flexReload()
        }
        /****yanglanting******/









        /**
         * 文件同步
         */
        function syncFileData() {
            $.ajax({
                type: 'post',
                async: false,
                dataType : 'json',
                url: /*[[@{/file/syncFileData}]]*/'',
                data: [],
                success: function (data) {
                    message(data.msg)
                },
                error: function(msg){
                    message(/*[[#{common.error}]]*/'');
                }
            });
        }

        /**
         * 表格查询
         */
        function query(){

            var parentId = $("#file-folder-id").attr("parent-id");
            var fileName = $("#file-name-id").val()
            $("#flexigrid-id").flexOptions({
                extParam:[
                    {name:"parentId",value:parentId},
                    {name: "fileName",value: fileName}
                ]

            }).flexReload()
        }

        /**
         * 进入文件夹
         */
        function enterDir(fileUuid,filePath) {
            // alert("进入文件夹:" + fileUuid)
            $("#file-folder-id").attr("parent-id",fileUuid)
            if (fileUuid === -1){
                $("#file-folder-id").val("/")
            }
            $.ajax({
                type: 'post',
                async: false,
                dataType : 'json',
                url: /*[[@{/file/queryFileInfoById}]]*/'',
                data: [
                    {name:"fileUuid",value:fileUuid}
                ],
                success: function (data) {
                    if (data){
                        $("#file-folder-id").val(data['filePath'])

                    }else {
                        $("#file-folder-id").val("/")
                    }
                },
                error: function(msg){
                    message(/*[[#{common.error}]]*/'');
                }
            });

            query()
        }

        /**
         * 进入上一级文件夹
         */
        function upDir() {
            var fileUuid = $("#file-folder-id").attr("parent-id");
            $.ajax({
                type: 'post',
                async: false,
                dataType : 'json',
                url: /*[[@{/file/queryFileInfoById}]]*/'',
                data: [
                    {name:"fileUuid",value:fileUuid}
                ],
                success: function (data) {
                  if (data){
                      enterDir(data['parentUuid'])

                  }else {
                      $("#file-folder-id").val("/")
                  }
                },
                error: function(msg){
                    message(/*[[#{common.error}]]*/'');
                }
            });
        }

        /**
         * 创造文件夹
         */
        function mkdirFun() {
            $("#mkdir-dialog-id").dialog('open')

        }

        /**
         * 上传文件
         */
        function uploadfile() {
            $("#upload-file-parent-id").val($("#file-folder-id").attr("parent-id"));
            $("#upload-file-dialog-id").dialog('open')
        }

        /**
         * 文件复制
         */
        function copyFile() {
            var ids = $("#flexigrid-id").getFlexigridiAttrByIndex(0)
            if(ids.length === 0){
                message(/*[[#{common.empty}]]*/'');
                return;
            }
            $("#file-copy-btn-id").attr('ids',ids)
            var parentId = $("#file-folder-id").attr("parent-id");
            $("#file-copy-btn-id").attr('src-uuid',parentId)

            $("#file-paste-btn-id").removeClass('hidden')
            $("#file-paste-num-id").text(ids.length+"")

        }


        /**
         * 文件粘贴
         */
        function pasteFile() {
            // $("#file-copy-btn-id").attr('ids',ids)
            var parentId = $("#file-folder-id").attr("parent-id");
            var srcUuid = $("#file-copy-btn-id").attr("src-uuid");
            if (parentId === srcUuid){
                message(/*[[#{file.paste.fail.same.folder}]]*/"")
                return
            }
            var ids = $("#file-copy-btn-id").attr('ids');
            $.ajax({
                type: 'post',
                async: false,
                dataType : 'json',
                url: /*[[@{/file/copyFile}]]*/'',
                data: [
                    {name:"srcUuidList",value:ids},
                    {name:"parentId",value:parentId},
                ],
                success: function (data) {
                    message(data.msg)
                    if(data.success){
                        $("#file-past-btn-id").addClass("hidden");
                    }
                },
                error: function(msg){
                    message(/*[[#{common.error}]]*/'');
                }
            });

        }

        //
        //
        // //双击事件
        // function rowDbclick(r) {
        //     $(r).dblclick(
        //         function () {
        //             var columnsArray = $(r).attr('ch').split("_FG$SP_");
        //             // console.info(columnsArray);
        //             $("#modify-file-dialog-id").dialog('open')
        //
        //             var fileUuid = columnsArray[0]
        //
        //             modifyFileInfo(fileUuid);
        //         });
        // }

        /**
         * 修改文件信息
         * @param fileUuid
         */
        function modifyUserInfo(fileUuid) {
            $.ajax({
                    type: 'post',
                    async: false,
                    dataType: 'json',
                    url: /*[[@{/file/queryFileInfoById}]]*/'',
                    data: [{name: "fileUuid", value: fileUuid}],
                    success: function (data) {

                        var list = $("form#modify-file-form-id input.form-control");
                        list.each(function (index, item) {
                            var name = $(item).attr("name")
                            $(this).val(data[name])

                        })
                        $("form#modify-file-form-id input.form-control").checkDom()

                        $("#modify-file-dialog-id").dialog('open')
                    },
                    error: function (msg) {
                        message(/*[[#{common.error}]]*/'');
                    }
                }
            );
        }

        /**
         * 上传文件
         */
        function uploadFile() {
            $("#upload-file-parent-id").val($("#file-folder-id").attr("parent-id"));
            $("#upload-file-dialog-id").dialog('open')
        }

        /**
         * 文件预览
         * @param fileUuid
         * @param fileName
         */
        function preFile(fileUuid,fileName) {

            /**
             * 文档预览
             * @type {RegExp}
             */
            var regDoc = RegExp("^.*docx$")
            if(regDoc.test(fileName)){
                $.ajax({
                        type: 'post',
                        async: false,
                        dataType: 'json',
                        url: /*[[@{/file/getShareUrl}]]*/'',
                        data: [
                            {name: "fileUuid", value: fileUuid}
                            ],
                        success: function (data) {
                            console.info("preFile" + JSON.stringify(data))
                            var url = data['code'];
                            if (url){
                                url = url.replaceAll("&","%26")
                                url = url.replaceAll("?","%3F")
                                $("#pro-document-iframe-id").attr("src","https://view.xdocin.com/xdoc?_xdoc="+ url)
                            }
                            $("#pre-document-dialog-id").dialog('option','title',fileName);
                            $("#pre-document-dialog-id").dialog('open')
                        },
                        error: function (msg) {
                            message(/*[[#{common.error}]]*/'');
                        }
                    }
                );
            }
        }

        /**
         * 文件分享
         * @param fileUuid
         * @param fileName
         */
        function shareFileInfo(fileUuid,fileName) {
            $("#share-file-name").attr("fileUuid",fileUuid);
            $("#share-file-name").text(fileName);
            $("#share-file-dialog-id").dialog('open')
        }

        /**
         * 查询分享地址
         */
        function queryShareUrl() {
            var fileUuid =  $("#share-file-name").attr("fileUuid");
            var fileValidity = $("#share-file-validity").val()
            $.ajax({
                type: 'post',
                async: false,
                dataType : 'json',
                url: /*[[@{/file/queryShareUrl}]]*/'',
                data: [
                    {name:"fileUuid",value: fileUuid},
                    {name:"fileValidity",value: fileValidity},
                ],
                success: function (data) {
                    console.info(`queryShareUrl:${JSON.stringify(data)}`)
                    $("#share-file-url-id").val(data['code']);
                },
                error: function(msg){
                    message(/*[[#{common.error}]]*/'');
                }
            });
        }


        /**
         * 删除文件（移至回收站）
         */
        function deleteFile() {
            // 获取选中的文件ID（参考其他功能的ID获取方式）
            var ids = [];
            var checkedRows = $("#flexigrid-id").find("input[type='checkbox']:checked");
            if (checkedRows.length === 0) {
                message(/*[[#{common.select.one}]]*/'');
                return;
            }
            checkedRows.each(function() {
                var tr = $(this).closest("tr");
                ids.push(tr.attr("id")); // 假设行ID对应文件UUID
            });

            // 显示确认对话框
            $("#delete-file-dialog-id").dialog({
                autoOpen: true,
                width: 300,
                modal: true,
                resizable: false,
                title: /*[[#{file.delete.dialog.title}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            // 发送删除请求
                            $.ajax({
                                type: 'post',
                                dataType: 'json',
                                url: /*[[@{/file/deleteToRecycle}]]*/'', // 后端接收删除请求的接口
                                data: [{name: "ids", value: ids.join(",")}],
                                success: function(data) {
                                    message(data.msg);
                                    if (data.success) {
                                        query(); // 刷新文件列表
                                        $(this).dialog("close");
                                    }
                                },
                                error: function() {
                                    message(/*[[#{common.error}]]*/'');
                                }
                            });
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $(this).dialog("close");
                        }
                    }
                ]
            });
        }


    </script>

    <style>

        a.hidden{
            display: none;

        }

        #file-paste-num-id{
            color: #ff0000;
        }
    </style>
</head>

<body>

    <header>
        <input id="file-name-id" th:placeholder="#{file.name.plc}" >

        <a href="#" class="btn-info btn" onclick="query()">
            <i class="glyphicon glyphicon-search"></i>
            <span th:text="#{common.query}"></span>
        </a>

        <a href="#" class="btn-info btn" onclick="addfile()">
            <i class="glyphicon glyphicon-plus"></i>
            <span th:text="#{common.add}"></span>
        </a>

        <a href="#" class="btn-info btn" onclick="deleteFile()">
            <i class="glyphicon glyphicon-trash"></i>
            <span th:text="#{common.delete}"></span>
        </a>

<!--        <a href="#" class="btn-info btn" onclick="uploadfile()">-->
<!--            <i class="glyphicon glyphicon-upload"></i>-->
<!--            <span th:text="#{common.upload}"></span>-->
<!--        </a>-->

        <a href="#" class="btn-info btn" onclick="downloadfile()">
            <i class="glyphicon glyphicon-download"></i>
            <span th:text="#{common.download}"></span>
        </a>

        <a href="#" class="btn-info btn" onclick="upDir()" th:title="#{file.up.folder}">
            <i class="glyphicon glyphicon-open"></i>
        </a>
        <input id="file-folder-id" value="/" parent-id="-1">

        <a href="#" class="btn-info btn" onclick="syncFileData()">
            <i class="glyphicon glyphicon-refresh"></i>
            <span th:text="#{file.sync.data}"></span>
        </a>

        <a href="#" class="btn-info btn" onclick="mkdirFun()">
            <i class="glyphicon glyphicon-book"></i>
            <span th:text="#{file.mkdir}"></span>
        </a>

        <a href="#" class="btn-info btn" onclick="uploadFile()">
            <i class="glyphicon glyphicon-cloud-upload"></i>
            <span th:text="#{file.upload.btn}"></span>
        </a>

        <a id="file-copy-btn-id" href="#" class="btn-info btn" onclick="copyFile()">
            <i class="glyphicon glyphicon-copy"></i>
            <span th:text="#{file.copy.btn}"></span>
        </a>

        <a id="file-paste-btn-id" href="#" class="btn-info btn hidden" onclick="pasteFile()">
            <i class="glyphicon glyphicon-paste"></i>
            <span th:text="#{file.paste.btn}"></span>
            (
            <span id="file-paste-num-id"></span>
            )
        </a>

    </header>

    <table id="flexigrid-id"></table>








    <div id="mkdir-dialog-id" style="display: none">
        <div class="form-group">
            <span th:text="#{file.folder.name}"></span>
            <input id="file-folder-name-id" class="form-control" pattern="^.+$">
        </div>
    </div>

    <div id="upload-file-dialog-id" style="display: none">
        <form id="upload-file-form-id" enctype="multipart/form-data" method="post" th:action="@{/file/uploadFile}">
            <input name="parentId" id="upload-file-parent-id" type="hidden">
            <div class="form-group">
                <span th:text="#{file.name}"></span>
                <input name="fileName" id="upload-file-name-id" pattern="^.+$" type="file">
            </div>
        </form>
    </div>



<div id="pre-document-dialog-id" style="display: none">

    <iframe id="prc-document-iframe-id" style="width: 100%;height: 400px">

    </iframe>

</div>


    <div id="share-file-dialog-id" style="display: none">
        <div class="form-group">
            <span th:text="#{file.name}"></span>
            <span class="form-control" id="share-file-name"></span>
        </div>

        <div class="form-group">
            <span th:text="#{file.share.validity}"></span>
            <input class="form-control" id="share-file-validity" type="number" value="1" onchange="queryShareUrl()">
        </div>

        <div class="form-group">
            <span th:text="#{file.share.url}"></span>
            <textarea class="form-control" id="share-file-url-id" style="height: 60px"></textarea>
        </div>
    </div>




</body>

<div id="modify-file-dialog-id" >
    <form id="modify-file-form-id" method="post" th:action="@{/file/modifyFileInfoById}">
        <div class="form-group">
            <span th:text="#{file.uuid}"></span>
            <input class="form-control" name="fileUuid" readonly>
        </div>

        <div class="form-group">
            <span th:text="#{file.name}"></span>
            <input class="form-control" name="fileName" pattern="^.{4,}$">
        </div>

        <div class="form-group">
            <span th:text="#{file.filePath}"></span>
            <input class="form-control" name="filePath"
                   pattern="^.*$" readonly>
        </div>

        <div class="form-group">
            <span th:text="#{file.fileType}"></span>
            <input class="form-control" name="fileType"
                   pattern="^.*$" readonly>
        </div>

        <div class="form-group">
            <span th:text="#{file.fileCapacity}"></span>
            <input class="form-control" name="fileCapacity"
                   pattern="^.*$" readonly>
        </div>
        <!-- 删除文件确认对话框 -->
        <div id="delete-file-dialog-id" style="display: none;">
            <p th:text="#{file.delete.confirm}"></p>
        </div>
    </form>
</div>

</html>